import React from "react";
import ModelConfirm from "./components/modelConfirm/index";
class App3 extends React.Component {
  state = {
    list: ["a", "b", "c", "d"],
    show: false,
    // 临时变量
    item: ''
  };
  openModel(v) {
    this.setState({
      // 打开弹框
      show: true,
      // 存储可能要删除
      item: v
    });
  }

  closeModel() {
    this.setState({
      // 关闭弹框
      show: false,
    });
  }

  handleOK() {
    this.closeModel();

    this.setState({
      // 过滤删除数据
      list: this.state.list.filter(v => v !== this.state.item)
    })
  }
  render() {
    const { show } = this.state;
    return (
      <div>
        <ul>
          {this.state.list.map((v, i) => {
            return (
              <li key={i}>
                <span>{v}</span>
                <button onClick={() => this.openModel(v)}>删除</button>
              </li>
            );
          })}
        </ul>

        <ModelConfirm
          show={show}
          closeModel={() => this.closeModel()}
          handleOK={() => this.handleOK()}
        ></ModelConfirm>
      </div>
    );
  }
}

export default App3;

